<template>
  <div>
    <div>
      <p>导航:</p>
      <!-- <a href="#/home">首页</a> &nbsp;&nbsp;&nbsp;
      <a href="#/movie">电影</a>&nbsp;&nbsp;&nbsp;
      <a href="#/about">关于</a> -->
      <!-- router link标签的本质就是 一个 a标签   好处就是 自带 高亮的 class类名 -->
      <!--  <router-link to="/home">首页</router-link>
      <router-link to="/movie">电影</router-link>
      <router-link to="/about">关于</router-link> -->
      <router-link to="/goods?goodsname=衣服">瞅瞅衣服</router-link>
      <router-link to="/goods/裤子">瞅瞅裤子</router-link>
    </div>
    <div>
      <!-- 7 挂到挂载点 设置router-view组件(VueRouter内置的全局组件) 路由切换时  在这里显示对应的组件-->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
div:last-child {
  border: 1px solid red;
}
/* 精确匹配 路径一个都不能差*/
.router-link-exact-active {
  color: red;
}
.router-link-active {
  color: red;
}
</style>